<template>
  <div class="login-page">
    <div class="login-div">
      <h3 class="title">后台管理系统</h3>
      <el-tabs v-model="isDDloginType">
        <el-tab-pane label="账户密码登录" name="password">
           <span slot="label"><i class="el-icon-lock"></i> 账户密码登录</span>
        </el-tab-pane>
        <el-tab-pane label="钉钉扫码登录" name="ding">
            <span slot="label"><i class="el-icon-full-screen"></i> 钉钉扫码登录</span>
        </el-tab-pane>
      </el-tabs>
      <el-form v-show="isDDloginType === 'password'" ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
        <el-form-item prop="username">
          <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
            <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            type="password"
            auto-complete="off"
            placeholder="密码"
            @keyup.enter.native="handleLogin"
          >
            <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
          </el-input>
        </el-form-item>
        <!-- <div class="text-left">
          <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
        </div> -->
        <el-form-item style="width:100%;">
          <el-button
            :loading="loading"
            size="medium"
            type="primary"
            style="width:100%;"
            @click.native.prevent="handleLogin"
          >
            <span v-if="!loading">登 录</span>
            <span v-else>登 录 中...</span>
          </el-button>
        </el-form-item>
      </el-form>
      <div v-show="isDDloginType === 'ding'" class="ding-form">
        <div id="loginContainer" />
        <ding-qr :is-d-dlogin-type="isDDloginType" :redirect="redirect" />
      </div>
    </div>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import { encrypt, decrypt } from '@/utils/jsencrypt'
import dayjs from 'dayjs'
import DingQr from '@/components/DingQr/DingQr'
import '@/assets/plugin/canvas-nest.min'
const systemId = process.env.VUE_APP_BMS_SYSTEM_ID || 9999
export default {
  name: 'Login',
  components: {
    DingQr
  },
  data() {
    return {
      timeInterval: null,
      time: dayjs().format('HH:mm:ss'),
      codeUrl: '',
      cookiePassword: '',
      isDDloginType: 'password',
      loginForm: {
        username: '',
        password: '',
        rememberMe: true
      },
      loginRules: {
        username: [
          { required: true, trigger: 'blur', message: '用户名不能为空' }
        ],
        password: [
          { required: true, trigger: 'blur', message: '密码不能为空' }
        ]
      },
      loading: false,
      redirect: undefined
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  created() {
    this.getCookie()
    this.timeInterval = setInterval(() => {
      this.refreshTime()
    }, 1000)
  },
  mounted() {
    this.getSSO()
  },
  destroy() {

  },
  beforeCreate() {
    document.getElementsByTagName('canvas')[0].className = 'index_bg'
  },
  beforeDestroy: function() {
    document.getElementsByTagName('canvas')[0].removeAttribute('class', 'index_bg')
  },
  methods: {
    tabOnClick(name) {
      this.isDDloginType = name
    },
    refreshTime() {
      this.time = dayjs().format('HH:mm:ss')
    },
    /**
     * @Author Tangyuhui
     * @Description 获取单点登录token
     * @Date 2020-04-22 16:15:14 星期三
     */
    getSSO() {
      const env = process.env.VUE_APP_SSO_ENV || 'development'
      this.loading = true
      window.zhnxSSO.getToken({ env: env, systemId }).then(ret => {
        if (ret && ret.data && ret.data.code === '1000') {
          this.$store.dispatch('saveBmsMsg', ret.data.result)
          this.$router.push({ path: this.redirect || '/' }).catch(() => {})
        }
        this.loading = false
      }).catch(error => {
        this.loading = false
        console.log('created -> error', error)
      })
    },
    getCookie() {
      const username = Cookies.get('username')
      const password = Cookies.get('password')
      const rememberMe = Cookies.get('rememberMe')
      this.loginForm = {
        username: username === undefined ? this.loginForm.username : username,
        password: password === undefined ? this.loginForm.password : decrypt(password),
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
      }
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          if (this.loginForm.rememberMe) {
            Cookies.set('username', this.loginForm.username, { expires: 30 })
            Cookies.set('password', encrypt(this.loginForm.password), { expires: 30 })
            Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 })
          } else {
            Cookies.remove('username')
            Cookies.remove('password')
            Cookies.remove('rememberMe')
          }
          this.$store.dispatch('bmsLogin', this.loginForm).then(() => {
            this.loading = false
            this.$router.push({ path: this.redirect || '/' }).catch(() => {})
          }).catch((e) => {
            // 登录表单校验失败
            this.showError(e)
            this.loading = false
          })
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
  .index_bg{
     width: 100%;
     background: rgba(0,0,0,.6)!important;
     z-index: 1!important;
   }
    .login-page {
      position: relative;
      width: 100%;
      height:100%;
      overflow: hidden;
      background-size: cover;
      background-image: url('~@/assets/login_images/login-bg-2.jpg');
      background-position: center bottom;
        /* Header */
      height:100%;
        .login-div {
            position: absolute;
            margin-top: -220px;
             z-index:2;
            padding: 30px;
            text-align: center;
            top: 50%;
            left: 50%;
            background-color: white;
            border-radius: 5px;
            width: 410px;
            margin-left:-205px;
            &>.logo{
                img{
                    height: 90px;
                }
                span{
                    font-size: 14px;
                    margin-bottom: 20px;
                }
            }
            &>.login-from{
                .rememberMe{
                    width: 100%;
                    .ivu-form-item-content{
                        width: 100%;
                        display: inline-flex;
                        flex-direction: row;
                        justify-content: space-between;
                    }
                }
                .other-Login{
                    .ivu-form-item-content{
                        &>span{
                            img{
                                width: 24px;
                                margin-left: 16px;
                                cursor: pointer;
                                vertical-align: middle;
                                opacity: .7;
                                transition: all .2s ease-in-out;
                            }
                        }

                    }
                }
            }
        }
    }
   .title {
        margin: 0px auto 30px auto;
        text-align: center;
        color: #707070;
    }
</style>
